<template>
    <div class="w-screen h-screen flex items-stretch overflow-hidden">
        <!--w-screen: width:100vw-->
        <!--overflow-hidden: overflow-hidden-->
        <div class="w-56 h-screen flex-shrink-0">
            <!--w-56:width:14rem-->
            <!--flex-shrink:0-->
            <Menu/>
        </div>
        <div class="flex-1 flex flex-col">
            <!--flex-1:允许flex项目根据需要放大和缩小，忽略其初始尺寸-->
            <!--flex-col: flex-direction:column-->
            <div class="h-14">
                <Header/>
            </div>
            <div class="flex-1 overflow-hidden">
                <ElScrollbar>
                    <div class="container mx-auto">
                        <RouterView/>
                    </div>
                </ElScrollbar>
            </div>
            <div class="h-20">
                <Footer/>
            </div>
        </div>
        <PlayList/>
    </div>
</template>

<script lang="ts" setup>
    import Menu from "@/components/layout/menu/Menu.vue"
    import Header from "@/components/layout/header/Header.vue";
    import Footer from "@/components/layout/footer/Footer.vue";
    import PlayList from "@/components/layout/playList/playList.vue";

</script>

<style scoped lang="scss">

</style>
